let bodyDom = document.getElementsByTagName("body");
let startX, startY, moveEndX, moveEndY, startTime, duringTime, nowTime;
let actionIndex = 1;
let scrollTop = 0;
let currentStep = 1;
let curPicIndex = 0;
function startFunc(e) {
    e.preventDefault();
    startX = e.changedTouches[0].pageX;
    startY = e.changedTouches[0].pageY;
    startTime = +new Date();
}

function moveFunc(e) {
    e.preventDefault();
    moveEndX = e.changedTouches[0].pageX;
    moveEndY = e.changedTouches[0].pageY;
    X = moveEndX - startX;
    Y = moveEndY - startY;
    nowTime = +new Date();
    duringTime = nowTime - startTime;
    if (Math.abs(X) > Math.abs(Y) && X > 0) {
        console.log("left 2 right");
    } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        console.log("right 2 left");
    } else if (
        Math.abs(Y) > Math.abs(X) && Y > 0) {
        console.log("top 2 bottom");
    } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        scrollTop += Math.abs(Y);
        if (scrollTop > 500 && Math.abs(Y) >= actionIndex * 50) {
            console.log(actionIndex)
            console.log(Math.abs(Y))
            curPicIndex += 1;
            setup(curPicIndex)
            actionIndex += 1;

            console.log("top")
        }
        console.log("bottom 2 top");
    } else {
        console.log("just touch");
    }
}
function moveEndFunc() {
    actionIndex = 1
}
bodyDom[0].addEventListener("touchstart", startFunc, {
    passive: false
});


bodyDom[0].addEventListener("touchmove", moveFunc, {
    passive: false
})
bodyDom[0].addEventListener("touchend", moveEndFunc, {
    passive: false
})

let loader = PIXI.loader;
let TextureCache = PIXI.utils.TextureCache;
let Rectangle = PIXI.Rectangle;
let Sprite = PIXI.Sprite;

let type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
    type = "canvas"
}

PIXI.utils.sayHello(type)
//Create a Pixi Application
let app = new PIXI.Application({
    width: 750,
    height: window.innerHeight > 1334 ? 1334 : window.innerHeight,
    transparent: true, // 背景色transparent
    // backgroundColor: 0x00000, // 背景颜色设置
});
let renderer = app.renderer;
let stage = app.stage;
// app.renderer.backgroundColor = 0xffffff;
document.body.appendChild(app.view);
let images = [];
var picIndex = 1;
// 各目录图片数量
let picList = [13, 8, 15, 5, 5, 5, 8, 7, 7, 5, 8, 7, 8];
picList.forEach((item, index) => {
    while (picIndex < item) {
        images.push("images/donghua/" + (index + 1) + "/" + picIndex + ".jpg");
        picIndex++;
    }
    picIndex = 1;
});

function setup(index) {
    index = index ? index : 0;
    let sprite = new PIXI.Sprite(
        PIXI.loader.resources[images[index]].texture
    );
    
    // sprite.position.set(20, 100)
    // sprite.scale.x = 2;
    // sprite.scale.y = 2;
    app.stage.addChild(sprite);
}
PIXI.loader
    .add(images)
    .on("progress", loadProgressHandler)
    .load(setup);

    function loadProgressHandler(loader, resource) {
        console.log("loading: " + resource.url);

        //Display the percentage of files currently loaded
        console.log("progress: " + loader.progress + "%");
    }
        // loader
        // .add("images/tileset.png")
        // .load(setupa);
        // function setupa() {

        // //Create the `tileset` sprite from the texture
        // let texture = TextureCache["images/tileset.png"];

        // //Create a rectangle object that defines the position and
        // //size of the sub-image you want to extract from the texture
        // //(`Rectangle` is an alias for `PIXI.Rectangle`)
        // let rectangle = new Rectangle(192, 128, 64, 64);

        // //Tell the texture to use that rectangular section
        // texture.frame = rectangle;

        // //Create the sprite from the texture
        // let rocket = new Sprite(texture);

        // //Position the rocket sprite on the canvas
        // rocket.x = 32;
        // rocket.y = 32;

        // //Add the rocket to the stage
        // app.stage.addChild(rocket);

        // //Render the stage
        // renderer.render(stage);
        // }
        // console.log(app)
        //Add the canvas that Pixi automatically created for you to the HTML document
